import React from 'react';
import { useNavigate } from 'react-router-dom';
import '../css/Main.css';
import FundusImage from '../assets/girls.png';
import DashboardLayout from '../components/DashboardLayout';

const Home = () => {
  const navigate = useNavigate();

  return (
    <DashboardLayout>
      <div className="home-container">
        <section className="hero">
          <div className="hero-text">
            <h1>EyeAI 智能眼病识别系统</h1>
            <p>利用人工智能技术，助力眼底疾病早期筛查与诊断，守护每一位用户的眼健康。</p>
            <div className="hero-buttons">
              <button onClick={() => navigate('/upload')}>立即检测</button>
              <button className="outline" onClick={() => navigate('/diseases')}>了解疾病</button>
              <a href="mailto:marmaraaiteam@gmail.com.tr" className="contact-link">联系我们</a>
            </div>
          </div>
          <div className="hero-image">
            <img src={FundusImage} alt="眼底图像检查" />
          </div>
        </section>

        <section className="features">
  <div className="feature-card">
    <h3>📌 平台目标</h3>
    <p><strong>愿景：</strong> 借助AI算法与眼底图像识别技术，实现眼病的智能辅助筛查。</p>
    <p><strong>使命：</strong> 提升眼疾早诊率，推动全民眼健康意识。</p>
  </div>

  <div className="feature-card">
    <h3>📍 眼科疾病早期筛查的重要性</h3>
    <p><strong>早期发现：</strong> 多种眼部疾病在早期并不明显，定期筛查有助于及时干预。</p>
    <p><strong>降低风险：</strong> 避免病变进一步恶化，延缓视力损伤。</p>
  </div>

  <div className="feature-card">
    <h3>🚀 AI辅助 + 医学数据革新</h3>
    <p><strong>AI精准识别：</strong> 结合深度学习模型，对眼底图像进行自动化分析。</p>
    <p><strong>多维数据支持：</strong> 提供高效诊断依据，助力个性化治疗方案。</p>
  </div>

  <div className="feature-card">
    <h3>💡 核心功能</h3>
    <p><strong>上传图像：</strong> 用户可上传眼底图像进行识别。</p>
    <p><strong>病变检测：</strong> 系统返回诊断结果与概率信息，辅助医生判断。</p>
  </div>
</section>

      </div>
    </DashboardLayout>
  );
};

export default Home;
